<template>
  <div class="qr-container">
    <!-- 背景图片容器 -->
    <div class="qr-background">
      <img src="@/assets/img/1.jpeg" alt="背景图片">
    </div>
    
    <!-- 白色背景层 -->
    <div class="qr-white-bg"></div>

    <!-- 遮罩层移到二维码前面 -->
    <div class="qr-mask"></div>
    
    <!-- 二维码内容 -->
    <div class="qr-code" ref="qrCodeRef">
      <qrcode 
        :value="qrCodeValue" 
        :size="qrCodeSize" 
        :margin="qrCodeMargin" 
        :render-as="renderAs"
        :background="'transparent'"
        :foreground="'rgba(255, 255, 255, 1)'"
        :level="'H'"
        class="qr-svg"
      ></qrcode>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, defineProps } from 'vue';
import Qrcode from 'qrcode.vue';

const props = defineProps({
  href: {
    type: String,
    default: 'http://danandgift.free3v.vip/'
  }
});

const qrCodeValue = ref(props.href);
const qrCodeSize = ref(400); // 进一步增加尺寸
const qrCodeMargin = ref(1); // 减小边距
const renderAs = ref('svg');
const qrCodeRef = ref(null);

// 在组件挂载后修改 SVG 样式
nextTick(() => {
  const svg = qrCodeRef.value?.querySelector('svg');
  if (svg) {
    svg.style.width = '100%';
    svg.style.height = '100%';
    const rect = svg.querySelector('rect');
    if (rect) {
      rect.setAttribute('fill', 'transparent');
    }
  }
});
</script>

<style lang="scss" scoped>
.qr-container {
  position: relative;
  width: 280px;
  height: 280px;
  overflow: hidden;
  border-radius: 20px;

  .qr-background {
    position: absolute;
    inset: 0;
    z-index: 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(3px) brightness(0.6);
    }
  }

  .qr-white-bg {
    position: absolute;
    inset: 20px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    backdrop-filter: blur(10px);
  }

  .qr-mask {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.08)
    );
    backdrop-filter: blur(2px);
    mix-blend-mode: overlay;
    pointer-events: none; // 允许点击穿透
  }

  .qr-code {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 20px;
    mix-blend-mode: normal; // 确保二维码不受混合模式影响

    .qr-svg {
      width: 85%;
      height: 85%;
      position: relative; // 添加相对定位
      
      &::after { // 添加额外的发光效果
        content: '';
        position: absolute;
        inset: -5px;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.2),
          transparent 70%
        );
        filter: blur(5px);
      }
      
      :deep(svg) {
        width: 100% !important;
        height: 100% !important;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3))
               contrast(150%)
               brightness(120%);
        position: relative;
        z-index: 1;
        
        path {
          stroke: rgba(255, 255, 255, 0.8);
          stroke-width: 1;
        }
      }
    }
  }
}

@keyframes backgroundPulse {
  0% {
    filter: blur(3px) brightness(0.6);
  }
  50% {
    filter: blur(4px) brightness(0.65);
  }
  100% {
    filter: blur(3px) brightness(0.6);
  }
}

.qr-background img {
  animation: backgroundPulse 4s ease-in-out infinite;
}
</style>



